<template>
<div class="login">
  <a-form-model :layout="'horizontal'" :model="loginModel" :wrapperCol="{span:24}"
                @submit="handleLoginSubmit">
    <a-form-model-item>
      <a-input v-model="loginModel.username" placeholder="username: admin or user" >
        <a-icon slot="prefix" type="user" />
      </a-input>
    </a-form-model-item>
    <a-form-model-item>
      <a-input v-model="loginModel.password" placeholder="password: vue-alain" >
        <a-icon slot="prefix" type="lock" />
      </a-input>
    </a-form-model-item>
    <a-form-model-item>
      <a-checkbox class="login-form-remember" v-model="loginModel.remember">
        自动登录
      </a-checkbox>
      <a class="login-form-forgot" href="">
        忘记密码
      </a>
      <a-button type="primary" htmlType='submit' block>
        登录
      </a-button>
    </a-form-model-item>
  </a-form-model>
    <div class="other">
        其他登录方式
        <i title="in fact Auth0 via window" @click="open('auth0', 'window')"
            class="anticon anticon-alipay-circle icon"></i>
        <i title="in fact Github via redirect" @click="open('taobao')"
        class="anticon anticon-taobao-circle icon"></i>
        <i title="真的是微博" @click="open('weibo', 'window')"
        class="anticon anticon-weibo-circle icon"></i>
        <a class="register" routerLink="/passport/register">注册账户</a>
    </div>

</div>
</template>

<style lang="less">
// @import '../../../assets/theme/styles/index.less';
@import './login.less';
.login-form-forgot {
  float: right;
}
.login-form-remember{
  float: left;
}
</style>

<script lang="ts">
import {
  Component,
  Prop,
  Vue,
} from 'vue-property-decorator';

import { mapState, mapActions, mapMutations } from 'vuex';

// import {
//   State,
//   Mutation,
//   namespace,
// } from 'vuex-class';

import axios from 'axios';

// import store from '@/store/store';

// import axios from 'axios';

// const userModule = namespace('user');

@Component({
  components: {},
  computed: {
    ...mapState('user', {
      token: 'token',
    }),
  },
  methods: {
    ...mapActions('user', {
      login: 'login',
    }),
    ...mapMutations('user', {
      changeToken: 'changeToken',
    }),
  },
})
export default class Login extends Vue {
  private loginForm: any = null;

  private loading = false;

  public token!: string;

  public login!: (token: string) => {};

  public changeToken!: (token: string) => {};

  // private error: string = '';
  // eslint-disable-next-line class-methods-use-this
  public formItemLayout() {
    return {};
  }

  private loginModel: any = {
    username: null,
    password: null,
    remember: true,
  };

  // @userModule.Mutation('loginSuccess')
  // private loginSuccess: any;

  // constructor() {
  //   super();
  // }

  private created() {
    console.log(this);
    this.loginForm = this.$form.createForm(this);
  }

  // private mounted() {
  // }

  private getRedirect(): string {
    if (!this.$route.query.redirect) {
      return '/';
    }
    const { redirect } = this.$route.query;
    return redirect as string;
    // return '/';
  }

  // eslint-disable-next-line class-methods-use-this
  private handleLoginSubmit(e: any) {
    e.preventDefault();
    console.log('login', e);
    // this.changeToken('bbbbb');
    axios.post('/login', {
      username: 'admin',
      password: '888888',
    }).then((res: any) => {
      console.log('login result', res);
      const { token } = res.data;
      this.changeToken(token);
      console.log(this.token);

      const redirect = this.getRedirect();
      console.log(redirect);
      window.sessionStorage.setItem('token', token);
      if (redirect) {
        this.$router.push(redirect);
      } else {
        this.$router.push('/');
      }
    });
  }
}
</script>
